<template>
  <j-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :maskClosable="false"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel">
    <plan-info-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit" :visibleFields = "visibleFields"/>
    <div>
      <CommentBox :userInfo="userInfo" :reply-info="replyInfo"  @submit-box="submitBox" :showCancle="showCancle"></CommentBox>
      <CommentList :comments="comments" :planInfoId="record.id"></CommentList>
    </div>
  </j-modal>
</template>

<script>
  import CommentBox from "@/components/comments/CommentBox"
  import CommentList from "@/components/comments/CommentList"

  import {mapMutations} from 'vuex'
  import { getAction,postAction } from '@/api/manage'
  import PlanInfoForm from './PlanInfoForm'
  export default {
    name: 'PlanComment',
    components: {
      PlanInfoForm,
      CommentList,
      CommentBox
    },
    data() {
      return {
        title:'',
        record: {},
        width:800,
        visible: false,
        disableSubmit: false,
        visibleFields: false,
        showCancle: false,
        submitting: false,
        value: '',
        userInfo: {
          uid: this.$store.state.user.info.realname,
          username: this.$store.state.user.info.realname

        },
        replyInfo: {
          uid: "",
          blogUid: "uid000003",
          replyUserUid: "uid000004",
          replyUid: 0
        },
        comments: [
            {
                uid: 'uid000',
                userName: "陌溪",
                content: '我是一级评论',
                reply: [
    
                ]
            }
        ],
      }
    },
    mounted() {
      console.log(this.$store.state.user.info)
    },
    methods:{
      //拿到vuex中的写的两个方法
      ...mapMutations(['setCommentList', 'increment']),
      submitBox(e) {
        postAction('/plan/planComment/add', {
          username: e.username,
          content: e.content,
          planInfoId: this.record.id,
          parentId: e.replyUid == 0? -1:e.replyUid
        }).then(res => {
          if (res.success) {
            var comments = this.$store.state.comment.commentList;
            e.uid = this.$store.state.comment.id
            e.createTime = '刚刚'
            comments.push(e);
            this.$store.commit("setCommentList", comments);
            this.$store.commit("increment");
          } else {
            this.$message.warning(res.message)
          }
        }).catch(e => this.$message.warning(e.message || e))
      },
      add () {
        this.visible=true
        this.$nextTick(()=>{
          this.$refs.realForm.add();
        })
      },
      edit (record) {
        this.record = record;
        getAction(`/plan/planComment/queryByPlanId`,{planid:record.id}).then(res=>{
          if(res.success){
            this.comments = res.result
            this.setCommentList(this.comments);
          }
        })
        this.visible=true
        this.$nextTick(()=>{
          this.$refs.realForm.edit(record);
        })
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        this.$refs.realForm.handleOk();
      },
      submitCallback(){
        this.$emit('ok');
        this.visible = false;
      },
      handleCancel () {
        this.close()
      }
    }
  }
</script>

<style scoped>
</style>